<template>
    <h4>{{person}}</h4>
    <h1>人的信息</h1>
    <h2>姓名：{{name}}</h2>
    <h2>姓名：{{age}}</h2>
    <h2>薪资：{{salary}}K</h2>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="salary++">增长薪资</button>
</template>

<script>
  import {reactive,toRef,toRefs} from 'vue'
  export default {
    name: 'Demo',
    setup(){
        
      let person = reactive({
        name:'张三',
        age:18,
        job:{
          j1:{
            salary:20
          }
        }
      })

      // let name = toRef(person,'name')
      // console.log(name)

      const x = toRefs(person)
      console.log(x)

      //返回一个对象（常用）
      return {
        person,
        name:toRef(person,'name'),
        age:toRef(person,'age'),
        salary:toRef(person.job.j1,'salary'),
        ...toRefs(person)
      }

    },
  }
</script>

